<template>
	<text>{{displayValue}}</text>
</template>
<script lang="ts">
	// @ts-nocheck
	import { defineComponent, computed, watch, ref, onUnmounted } from '@/uni_modules/lime-shared/vue';
	import dateformatProps from './props';
	import { friendlyDate } from './format';
	
	export default defineComponent({
		name: 'l-dateformat',
		props: dateformatProps,
		options: {
			addGlobalClass: true,
			virtualHost: true,
		},
		setup(props) {
			let refreshInterval = -1;
			const refreshMark = ref(0)
			const displayValue = computed(():string=>{
				refreshMark.value
				return friendlyDate(
					props.date,
					props.locale,
					props.threshold,
					props.format
				)
			})
			const refresh = ()=>{
				refreshMark.value++;
			}
			const setAutoRefresh = () => {
				clearInterval(refreshInterval)
				if(props.refreshRate > 0 && (props.threshold[0] > 0 || props.threshold[1] > 0)) {
					refreshInterval = setInterval(()=>{
						refresh()
					}, props.refreshRate)
				}
			}
			const stop = watch(():number=> props.refreshRate, (v)=>{
				setAutoRefresh()
			},{immediate: true})
			
			onUnmounted(stop)
			
			return {
				displayValue
			}
		}
	})
	
</script>
<style>
</style>
